<template>
  <div class='' style="width: 100%; height: 100%">
    <div class="comdiv">
      <div
        class="eachcomdiv"
        v-for="item in comdivs"
        draggable="true"
        @dragstart="dragstart($event, item)"
        @touchstart="dragstart($event, item)"
      >
        <div class="fwwcc" :style="{
          height: '100%',
          background: `url(/configuration/components/${item.imgname}.png) no-repeat center center`,
          backgroundSize: '100% 100%'
        }"
        >
        <span style="color: #fff;font-size:25px;background-color: #F4745F99;">
        {{ item.name }}
        </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import comlist from "../comlists";

import { mapState} from 'vuex'

export default {
  components: {
    
  },
  data() {
    return {
      comdivs: []
    };
  },
  computed: {
    ...mapState({editerdraged : state=>state.editer.editerdraged})
  },
  watch: {
    
  },
  mounted() {
    this.comdivs = comlist.data;
  },
  methods: {
    dragstart($e, item){
      // console.log(item);
      // this.editerdraged = item
      this.$store.state.editer.editerdraged = item

      console.log(comlist.data);
    }
  },
}
</script>
<style lang='scss' scoped>
.comdiv {
  height: 100px;
  width: 1500px;
  background-color: #53f3f355;
  display: flex;
}

.eachcomdiv {
  height: 90px;
  width: 200px;
  background-color: #fbd15055;
  margin: 5px;
}
</style>